<template>
  <div class="homeContainer">
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="12">
            <div class="topHomeView">
              <p>平台运行状态</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="topHomeView">
              <p>仪表运行详情</p>
            </div>
          </el-col>
        </el-row>
        <div class="bottomHomeView">
          <div id="map"></div>
          <div ref="infoWindow" class="infoWindow">
            {{ name }}
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <el-row>

          <el-col :span="11">
            <div class="homeViewData">
              <p>逐时总耗</p>
            </div>
            <div class="homeViewData">
              <p>逐日总耗</p>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="homeViewData">
              <p>日同比分析</p>
            </div>
            <div class="homeViewData">
              <p>月同比分析</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="deviceType"  style="margin-right: 0px">
              <svg-icon icon-class="water" class="water setlnglat" :style="type=='water'?'color:#bed8ff':'color:#bbbdc0'"/>
              <span>水</span>
            </div>
            <div class="deviceType"  style="margin-right: 0px">
              <svg-icon icon-class="electricity" class="electric setlnglat" :style="type=='electric'?'color:#f1db4c':'color:#bbbdc0'"/>
              <span> 电</span>
            </div>
            <div class="deviceType"  style="margin-right: 0px">
              <svg-icon icon-class="cold" class="cool setlnglat" :style="type=='cool'?'color:#436dd5':'color:#bbbdc0'"/>
              <span> 冷</span>
            </div>
            <div class="deviceType"  style="margin-right: 0px">
              <svg-icon icon-class="hot" class="heat setlnglat" :style="type=='heat'?'color:#f34018':'color:#bbbdc0'"/>
              <span>热</span>
            </div>
            <div class="deviceType"  style="margin-right: 0px">
              <svg-icon icon-class="flowRate" class="flow setlnglat" :style="type=='flow'?'color:#6af14c':'color:#bbbdc0'"/>
              <span>流量</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from "underscore";

let me;
let map;
export default {
  name: "HomeView",

  created() {
    me = this;
    me.getMapInfo();
  },
  methods: {
    initMap() {
      let position = new LKMap.LngLat(me.domainInfo.centerPoint[0], me.domainInfo.centerPoint[1]);
      map = new LKMap.Map("map", {
        center: position,
        zoom: 10.2,
        maxZoom: 16,
        style: 'lkmap://styles/85cba815284743eda5bd2828692a35f7',
      })
      me.addPolygon();
      me.addMarker(me.rangeList);
      map.on("contextmenu", me.contextmenuDoubleClick);
    },
    addPolygon() {
      if (me.polygon) me.polygon.remove();
      let path = me.domainInfo.pointList;
      me.polygon = new LKMap.Polygon({
        path: path,
        fillOpacity: 0.4,
        fillColor: '#7C87FF',
        strokeColor: '#0037E4',
        strokeWeight: 2
      });
      me.polygon.setMap(map);
    },
    async getMapInfo() {
      let response = await this.$asyncPost("home", {actionType: "homeDomainInfoQuery"});
      if (response.success) {
        me.domainInfo = response.domainInfo;
        me.rangeList = response.rangeList;
        me.initMap();
      }
    },
    addMarker(pointList) {
      for (const range of pointList) {
        let position = new LKMap.LngLat(range.lng, range.lat);
        let marker = new LKMap.Marker({
          position: position,
          anchor: 'bottom',
          height: range.height,
          label: {
            content: range.rangeName,
            offset: "top",
          },
          visible: range.parentId === 0
        });
        marker.setExtData({
          rangeId: range.rangeId,
          parentId: range.parentId
        })
        marker.on('click', me.showChildrenPoint);
        marker.on('dblclick', me.dbClickEvent);
        marker.setMap(map);
        me.markerList[range.rangeId] = {
          rangeId: range.rangeId,
          parentId: range.parentId,
          marker: marker,
        };
        if (range.children.length > 0) {
          me.addMarker(range.children)
        }
      }
    },
    dbClickEvent() {
      me.leftClickCount = 0;
      clearTimeout(me.leftClickTimeout);
    },
    showChildrenPoint(marker) {
      me.leftClickCount++;
      me.leftClickTimeout = setTimeout(function () {
        if (me.leftClickCount === 1) {
          me.leftClickCount = 0;
          let rangeId = marker.layer.extData.rangeId;
          let queryList = _.filter(me.markerList, function (data) {
            return data.parentId === rangeId
          })
          if (queryList.length > 0) {
            me.parentId = rangeId;
            for (const index in me.markerList) {
              if (me.markerList[index].parentId === rangeId) {
                me.markerList[index].marker.show();
              } else {
                me.markerList[index].marker.hide();
              }
            }
          }
          clearTimeout(me.leftClickTimeout);
        }
      }, 300)
    },
    contextmenuDoubleClick() {
      me.rightClickCount++;
      if (me.rightClickCount === 1) {
        // 设置定时器，在指定时间内等待第二次点击
        me.rightClickTimeout = setTimeout(function () {
          me.rightClickCount = 0;
          clearTimeout(me.rightClickTimeout);
        }, 300); // 这里的300毫秒是可以根据需要调整的双击间隔时间
      } else if (me.rightClickCount === 2) {
        // 如果在指定时间内有第二次点击，则执行双击事件
        me.childrenPointReturn();
        // 重置点击计数和定时器
        me.rightClickCount = 0;
        clearTimeout(me.rightClickTimeout);
      }
    },
    childrenPointReturn() {
      if (me.parentId !== 0) {
        let parentInfo = _.find(me.markerList, function (data) {
          return data.rangeId === me.parentId
        })
        for (const index in me.markerList) {
          if (me.markerList[index].parentId === parentInfo.parentId) {
            me.markerList[index].marker.show();
          } else {
            me.markerList[index].marker.hide();
          }
        }
        me.parentId = parentInfo.parentId;
      }
    }

  },
  data() {
    return {
      type:"water",
      domainInfo: {},
      rangeList: {},
      markerList: {},
      polygon: null,
      parentId: 0,
      leftClickCount: 0,
      leftClickTimeout: {},
      rightClickCount: 0,
      rightClickTimeout: {}
    };
  },
}
</script>
<style scoped lang="scss">
.homeContainer {
  padding: 65px 45px 10px 45px;
  p{
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 0px 10px 20px;
  }
}

.deviceType {
  background: #151617;
  margin-right: 30px;
  border-radius: 14px;
  margin-top: 25px;
  height: 135px;
}
.homeViewData{
  height: 375px;
  background: #151617;
  margin-right: 30px;
  border-radius: 14px;
  margin-top: 25px;
}
.topHomeView {
  height: 300px;
  background: #151617;
  margin-right: 30px;
  border-radius: 14px;
  margin-top: 25px;
}

.bottomHomeView {
  height: 450px;
  background: #151617;
  margin-right: 30px;
  border-radius: 14px;
  margin-top: 25px;
}

.infoWindow {
  padding: 5px 40px;
  background: rgba(0, 0, 0, 0.46);
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}
</style>
